<template>
    <div id="PoParticulars">
        <v-tableTitle :btnConfig="btnConfig"
                      :tableSelectData="tableSelectData" @close="close" @unbundle="unbundle"></v-tableTitle>
        <v-table
                :searchFlag="false"
                :hasEdit="false"
                :pageSize="pageSize"
                :page="page"
                :tableConfig="tableConfig"
                :tableData="tableData"
                :total="total"
                @findData="getTableData"
                @getTableData="getTableData"
                @searhData="searhData"
                @selectData="selectData"
                @upData="getTableData"
                ref="table"
        ></v-table>
    </div>
</template>

<script>
    import tableTitle from "commons/TableTitle";
    import table from "commons/Table";
    import baseMixin from "@/mixins/BaseMixin";
    import config from "./Config";

    export default {
        name: "PoParticulars",
        mixins: [baseMixin, config],
        data() {
            return {
                routeData: {},
                tableConfig: [
                    {
                        label: this.$t('out.dropid'),
                        prop: "bindingnumber",
                        input: "input",
                    },
                    {
                        label: this.$t('config.carrierCode'),
                        prop: "carriercode",
                        input: "input",
                    },
                    {
                        label: this.$t('out.orderkey'),
                        prop: "orderkey",
                        input: "input",
                    },
                    {
                        label: this.$t('in.standardlpn'),
                        prop: "dropid",
                        input: "input",
                    },
                    {
                        label: this.$t('out.itemnumber'),
                        prop: "itemnumber",
                        input: "input",
                    },
                ],
                tableData: [],
                pageSize: 10,
              page: 1,
                total: 0,
                tableSelectData: [],
                tableSearhData: {},
            };
        },
        computed: {
            btnConfig() {
                return [
                    {label: this.$t('out.unbundle'), certigier: this.saveDetailStatus, disabled: true, invalid: "unbundle"},
                    {label: this.$t('common.close'), invalid: "close"},
                ]
            }
        },
        created() {
        },
        methods: {
            close() {
                this.$router.push({name: "outorderbindding"})
            },
            async unbundle(data) {
                try {
                    let res = await this.$api.post(`/jiebangOutorderbindding`, data);
                    
                        this.$message.success(res.returnMgr);
                        let page = sessionStorage.getItem('page');
                        this.getTableData(page, this.tableSearhData);
                        
                    
                } catch (e) {
                    this.$message.error(e);
                }

            },
            //选中的内容
            selectData(data) {
                this.tableSelectData = data;
            },
            async getTableData(page, data) {
                try {
                    let res = await this.$api.post(`/queryOutOrderbinddingByBindingnumber`, {tray: this.routeData.bindingnumber});
                    
                        this.tableData = res.page.list;
                      this.page = res.page.curpage;
                        this.pageSize = res.page.pageSize;
                        this.total = res.page.total;
                    
                } catch (e) {
                    this.$message.error(e);
                }
            },
            searhData(data, up) {
                if (!up) {
                    this.tableSearhData = data;
                } else {
                    this.tableSearhData = data;
                    this.getTableData(1, this.tableSearhData);
                }
            },
        },
        mounted() {
            
            this.routeData = this.$store.state.routeData;
            this.getTableData();
        },
        watch: {
            tableSelectData(data) {
                if (this.permissionStatus) {
                    if (data.length > 0) {
                        this.saveDetailStatus = false;
                    } else {
                        this.saveDetailStatus = true;
                    }
                }
            }
        },
        components: {
            "v-tableTitle": tableTitle,
            "v-table": table,
        }
    }
</script>

<style scoped>

</style>
